<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>代码高亮示例</title>
    <!-- Highlight.js 样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
    <!-- 添加复制按钮的CSS -->
    <style>
        /* 新增标题锚点样式 */
        .heading-anchor {
            margin-left: 10px;
            text-decoration: none;
            color: #ccc;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        h1:hover .heading-anchor,
        h2:hover .heading-anchor,
        h3:hover .heading-anchor,
        h4:hover .heading-anchor,
        h5:hover .heading-anchor,
        h6:hover .heading-anchor {
            opacity: 1;
        }
        
        .heading-anchor:hover {
            color: #58a6ff;
        }
        
        /* 标题样式 */
        h1, h2, h3, h4, h5, h6 {
            position: relative;
            padding-top: 20px;
            margin-top: 20px;
            border-bottom: 1px solid #eee;
        }

        .code-container {
            position: relative;
        }

        .code-header {
            display: flex;
            justify-content: space-between; /* 左右分布 */
            align-items: center;
            background: #1e2227;
            padding: 5px 10px;
            border-radius: 5px 5px 0 0;
            color: #abb2bf;
            font-family: monospace;
        }

        /* 按钮组：复制和下载并排显示 */
        .code-header > div {
            display: flex;
            gap: 8px; /* 按钮之间留白 */
        }

        /* 让按钮组靠右显示 */
        .btn-group {
            margin-left: auto; /* 关键：自动填充空白区域，将按钮组推到最右边 */
            display: flex;
            gap: 8px;
        }

        .download-btn,
        .copy-btn {
            background: #58a6ff;
            color: white;
            border: none;
            border-radius: 3px;
            padding: 3px 8px;
            cursor: pointer;
            font-size: 0.8em;
        }

        .download-btn:hover,
        .copy-btn:hover {
            background: #3d8eff;
        }
        blockquote {
            margin: 10px 0; /* 上下外边距 */
            padding: 15px; /* 内边距 */
            border-left: 4px solid #ccc; /* 左边框 */
            background-color: #f9f9f9; /* 背景颜色 */
            /*font-style: italic;  斜体 */
            /*font-size: 1.1em;  字体大小 */
            color: #666666; /* 字体颜色 */
        }

        li {
            margin: 8px;
        }

        pre{
            margin: 0;
        }

        pre code.hljs {
            font-family: "Consolas","Monaco","DejaVu Sans Mono","Courier New", Courier, monospace;
            font-size: 14px; /* 可选：调整字号 */
            line-height: 1.5; /* 可选：增强行间距，提高可读性 */
            border-radius: 0 0 5px 5px;
            padding: 1em !important;
        }

        /* 只作用于没有父 <pre> 的 <code>，即内联代码 */
        :not(pre) > code {
            font-family: Consolas, Monaco, "Courier New", monospace;
            background-color: #ececec; /* 或你喜欢的背景色 */
            padding: 2px 6px;         /* 内边距 */
            border: 1px solid #dcdfe6;            /*  添加边框颜色 */
            border-radius: 6px;       /* 圆角 */
            font-size: 0.9em;         /* 字号可选 */
            white-space: pre-wrap;    /* 防止过长内容破坏布局 */
        }
        /* 添加折叠样式 */
        .code-container.collapsed pre {
            display: none;
        }

        .code-header .toggle-icon {
            margin-right: 5px;
            cursor: pointer;
        }


        /* 表格整体样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            overflow-x: auto;
            /*display: block;  启用横向滚动 */
            border-collapse: collapse; /* 合并边框，避免间距问题 */
        }

        /* 统一行高和内边距 */
        tbody tr, thead tr {
            height: 40px;             /* 统一行高 */
        }

        td, th {
            padding: 8px 12px;        /* 单元格内边距：上下8px，左右12px */
            text-align: left;          /* 文本左对齐（可选） */
        }

        /* 表头加粗 */
        thead th {
            font-weight: bold;
            background-color: #f2f2f2; /* 可选：统一表头背景色 */
        }

        /* tbody 偶数行浅灰色背景 */
        tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        /* thead 偶数行浅灰色背景 */
        thead tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* 所有表格边框为灰色 */
        table, th, td {
            border: 1px solid #ccc; /* 灰色边框 */
        }

        /* 目录样式 */
        .toc {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
            font-size: 0.9em;
        }

        .toc ul {
            list-style-type: none;
            padding-left: 20px;
            margin: 5px 0;
        }

        .toc li {
            margin: 2px 0;
        }

        .toc a {
            text-decoration: none;
            color: #0366d6;
        }

        .toc a:hover {
            text-decoration: underline;
        }


    </style>
</head>
<body>
    {markdown_content}

    <!-- Highlight.js 核心库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <!-- 需要高亮的语言 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>
    <!-- 复制 & 下载功能实现 -->
    <script>
        // 语言标识到文件扩展名的映射表
        const languageToExtension = {
            python: 'py',
            javascript: 'js',
            typescript: 'ts',
            java: 'java',
            cpp: 'cpp',
            c: 'c',
            json: 'json',
            shell: 'sh',
            bash: 'sh',
            html: 'html',
            css: 'css',
            markdown: 'md',
            yaml: 'yaml',
            xml: 'xml',
            php: 'php',
            sql: 'sql',
            sqlite: 'sql',
            ruby: 'rb',
            swift: 'swift',
            objectivec: 'm',
            go: 'go',
            rust: 'rs',
            vue: 'vue',
            react: 'jsx'
        };

        // 初始化高亮
        hljs.highlightAll();

        // 添加复制功能
        document.querySelectorAll('.copy-btn').forEach(button => {
            button.addEventListener('click', () => {
                const codeBlock = button.parentElement.parentElement.nextElementSibling;
                const codeText = codeBlock.textContent;

                navigator.clipboard.writeText(codeText).then(() => {
                    button.textContent = '已复制!';
                    setTimeout(() => {
                        button.textContent = '复制';
                    }, 2000);
                });
            });
        });

        // 下载功能实现
        document.querySelectorAll('.download-btn').forEach(button => {
            button.addEventListener('click', () => {
                const codeBlock = button.parentElement.parentElement.nextElementSibling;
                const codeText = codeBlock.textContent;

                // 创建 Blob 对象
                const blob = new Blob([codeText], { type: 'text/plain' });

                // 创建 a 标签并触发下载
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);

                // 提取语言标识，例如从 class="language-python" 得到 "python"
                //const languageMatch = codeBlock.className.match(/language-(\w+)/);
                //const lang = languageMatch ? languageMatch[1].toLowerCase() : 'text';
                const languageMatch = button.parentElement.previousElementSibling.textContent;
                const lang = languageMatch ? languageMatch.toLowerCase() : 'text';

                // 从映射表中获取扩展名，默认为 txt
                const ext = languageToExtension[lang] || 'txt';

                // 设置文件名
                //link.download = `code.${ext}`;
                link.download = generateTimestampFilename('code', ext);
                link.click();

                // 释放对象内存
                URL.revokeObjectURL(link.href);
            });
        });
        function generateTimestampFilename(baseName = 'code', ext = 'txt') {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            const timestamp = `${year}${month}${day}_${hours}${minutes}${seconds}`;
            return `${baseName}_${timestamp}.${ext}`;
        }

        // 自动检测语言并显示
        document.querySelectorAll('.code-container').forEach(container => {
            const codeBlock = container.querySelector('pre code');
            const language = codeBlock.className.replace('language-', '');
            container.querySelector('.code-header span').textContent = language;
        });
        // 添加折叠功能逻辑
        document.querySelectorAll('.code-header').forEach(header => {
            const toggleIcon = header.querySelector('.toggle-icon');

            // 默认展开状态
            let isCollapsed = false;

            // 创建点击事件
            header.addEventListener('click', (e) => {
                // 排除按钮点击
                if (!e.target.classList.contains('copy-btn') &&
                    !e.target.classList.contains('download-btn')) {

                    const container = header.parentElement;
                    const codeBlock = container.querySelector('pre');

                    // 切换状态
                    isCollapsed = !isCollapsed;
                    container.classList.toggle('collapsed');

                    // 更新图标
                    toggleIcon.textContent = isCollapsed ? '▼' : '▶';
                }
            });
        });

    </script>

</body>
</html>